<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <style>
    #tour{
      width: 80%;
      height: 600px;
      margin: 100px auto;

    }

    img{
      width: 80%;
      height: 80%;
    }
    #div1,#div2,#div3{
      float: left;
      width: 33.3%;
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    p{
      width: 80%;
      height: 50px;
      background: coral;
      display: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    #tour div:hover p{
      display: block;
    }
  </style>
  <script>
    // attr 与 removeattr
    $(function (){
      $("#ele_btn").click(function (){
        //来设置attr属性
        $("#div1").attr("tips","北京");
        $("#div2").attr("tips","济南");
        $("#div3").attr("tips","杭州");
        // $("#div4").attr("tips","郑州");
      });
      $("#tour div").mouseover(function (){
        //来获取attr属性
        // this--ele当前元素 div this对象 Js对象--JQ对象的话
        var tips=$(this).attr("tips");
       $("div p").text(tips);
      });
      $("#ele_btn2").click(function (){

        $("#div1").removeAttr("tips");
        $("#div2").removeAttr("tips");
        $("#div3").removeAttr("tips");
        // $("#div4").removeAttr("tips");
        $("div p").text("");
      });
    });

  </script>
</head>
<body>
<h1>欢迎来到城市旅游网</h1>




  <div id="tour">
    <div id="div1">
      <img src="../img/2beijing.jpg" id="img1">
      <p></p>
    </div>
    <div id="div2">
      <img src="../img/2jinan.jpg" id="img2">
      <p></p>
    </div>
    <div id="div3">
      <img src="../img/3hangzhou.jpg" id="img3">
      <p></p>
    </div>

  </div>
<button id="ele_btn">设置提示属性</button>
<button id="ele_btn2">取消提示属性</button>
</body>
</html>